<template>
  <div class="contact">
    <div class="contact-body">
      <div class="container">
        <div v-slide-up class="contact-title f f-jc mb20">
          <div>联系我们</div>
        </div>
        <div v-slide-plus class="contact-map"></div>
        <div class="contact-from">
          <div class="contact-from-box">
            <div>
              <Title
                v-slide-up
                block="#4580dd"
                block-width="2"
                left="18"
                title="让我们联系您"
                color="#0e0b31"
                bold="700"
                class="mb60"
              />
              <div v-slide-plus class="form-item">
                <div class="form-label">名字</div>
                <div class="form-input">
                  <el-input
                    v-model="editFrom.name"
                    maxlength="20"
                    placeholder="Full Name"
                  />
                </div>
              </div>
              <div v-slide-plus class="form-item">
                <div class="form-label">手机</div>
                <div class="form-input">
                  <el-input
                    v-model="editFrom.phonenumber"
                    maxlength="11"
                    placeholder="Telephone Number"
                  />
                </div>
              </div>
              <div v-slide-plus class="form-item">
                <div class="form-label">邮箱</div>
                <div class="form-input">
                  <el-input v-model="editFrom.email" maxlength="20" placeholder="Email" />
                </div>
              </div>
            </div>
          </div>
          <div class="contact-from-box">
            <div>
              <Title
                v-slide-up
                block="#4580dd"
                block-width="2"
                left="18"
                title="留言备注"
                color="#0e0b31"
                bold="700"
                class="mb60"
              />
              <div v-slide-plus class="form-item">
                <div class="form-label">描述</div>
                <div class="form-input">
                  <el-input
                    v-model="editFrom.remark"
                    type="textarea"
                    :autosize="{ minRows: 7, maxRows: 7 }"
                    maxlength="200"
                    show-word-limit
                    placeholder="Tell us about your project"
                  />
                </div>
              </div>
              <div
                v-slide-plus
                class="form-item-btn"
                :class="{ disabled: submiting }"
                @click="handleSubmit"
              >
                {{ submiting ? "提交中..." : "提 交" }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { addLeaveWord } from "@/api/contact";
const route = useRoute();

const editFrom = reactive({
  name: "", // 名字
  email: "", // 邮箱
  phonenumber: "", // 手机
  remark: "", // 描述
  title: "联系我们", // 标题
});
const submiting = ref(false); // 提交中

onMounted(() => {
  if (route.query && route.query.title) {
    editFrom.title = decodeURIComponent(route.query.title as string);
  }
});

// 提交
const handleSubmit = () => {
  if (submiting.value) return;
  if (editFrom.name == "") {
    ElMessage.error("请输入名字");
    return;
  }
  if (editFrom.phonenumber == "") {
    ElMessage.error("请输入手机");
    return;
  }
  // 验证手机号
  if (!/^1[3456789]\d{9}$/.test(editFrom.phonenumber)) {
    ElMessage.error("请输入正确的手机号");
    return;
  }
  if (editFrom.remark == "") {
    ElMessage.error("请输入描述");
    return;
  }
  // 验证邮箱
  if (!/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(editFrom.email)) {
    ElMessage.error("请输入正确的邮箱");
    return;
  }
  submiting.value = true;
  addLeaveWord(editFrom)
    .then((res: any) => {
      if (res.code == 200) {
        ElMessage.success("提交成功");
        clearFrom();
      } else {
        ElMessage.error(res.msg);
      }
    })
    .finally(() => {
      setTimeout(() => {
        submiting.value = false;
      }, 1000);
    });
};

// 清空表单
const clearFrom = () => {
  editFrom.name = "";
  editFrom.email = "";
  editFrom.phonenumber = "";
  editFrom.remark = "";
  editFrom.title = "";
};
</script>
<style lang="scss" scoped>
.contact-body {
  width: 100%;
  height: 1399px;
  background: linear-gradient(
      180deg,
      #fff 595px,
      transparent 595px,
      #f9f9f9 0%,
      #f9f9f9 100%
    )
    no-repeat;
  .container {
    height: 100%;
    background: url("../../../assets/contact/contact-line.png") no-repeat;
    background-size: 100% 441px;
    padding-top: 186px;
    box-sizing: border-box;
    .contact-title {
      width: 100%;
      font-size: 64px;
      font-weight: 700;
      color: #0f0b33;
      position: relative;
      > div {
        z-index: 1;
      }
      &::after {
        content: "CONTACT US";
        font-size: 80%;
        background: linear-gradient(
          180deg,
          rgba(135, 133, 153, 0.31) 0%,
          rgba(135, 133, 153, 0) 100%
        );
        position: absolute;
        bottom: -20px;
        color: transparent;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        z-index: 0;
      }
    }
    .contact-map {
      width: 100%;
      height: 557px;
      background: url("https://img.js.design/assets/img/66b5da5d6902e7da25caaf85.png#b52dea58b33204f57f22634be050261d");
    }
    .contact-from {
      width: 100%;
      height: 500px;
      background-color: #fff;
      display: flex;
      &-box {
        display: flex;
        justify-content: center;
        align-items: center;
        flex: 1;
        height: 100%;
        &:first-child {
          border-right: 1px solid #e0e0e5;
        }
        > div {
          width: 434px;
          height: 394px;
          .form-item {
            margin-bottom: 20px;
            .form-label {
              font-size: 14px;
              color: #0e0b31;
              margin-bottom: 14px;
            }
            .form-input {
              width: 100%;
              min-height: 50px;
              background: rgba(231, 231, 235, 0.48);
              display: flex;
              .el-input,
              .el-textarea {
                min-height: 100%;
                background-color: transparent;
                box-shadow: none;
                border: none;
                outline: none;
                font-size: 14px;
                color: #0e0b31;
              }
            }
          }
          .form-item-btn {
            width: 100%;
            height: 54px;
            background-color: #4580dd;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #fff;
            font-size: 14px;
            font-weight: 700;
            margin-top: 44px;
            &:hover {
              cursor: pointer;
              background-color: #3f6fc1;
            }
            &:active {
              background-color: #3360ad;
            }
          }
          .disabled {
            background-color: #ccc;
            &:hover {
              cursor: not-allowed;
              background-color: #ccc;
            }
            &:active {
              background-color: #ccc;
            }
          }
        }
      }
    }
  }
}

:deep(.el-input__wrapper),
:deep(.el-textarea__inner),
:deep(.el-input__count) {
  background-color: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  resize: none;
}
</style>
